<template>
  <div>
    <h2>RIGHT --- {{ rightCount }}</h2>
    <button id="rightAdd" @click="add">+1</button>
    <!-- init="-9" 不加冒号 : , 表示传递的自定义属性init的值是 字符串-9 "-9" -->
    <!-- :init="-9" 加冒号 : , 表示传递的自定义属性init的值是 数字 -9 -->
    <!-- :init="'-9'" ->对应与 v-bind:init="'-9'", 传递是一个字符串  -->
    <!-- :init="-9"  ->对应与 v-bind:init="-9"  -->
    <!-- init 不传值,  对应 init = '' -->
    <!-- 不写init  init = undefined -->
    <my-count :init="127"></my-count>

    <!-- :init="sex" 表示传递的自定义属性init的值是组件的属性 this.sex: 'man'  -->
    <!--<my-count :init="sex"></my-count>-->
  </div>
</template>

<script>
// 1.导入 eventBus.js 模块
import eventBus from '@/components/eventBus'

export default {
  name: 'Right',
  data () {
    return {
      sex: 'man',
      // 子组件自己的数据, 将来希望把 rightCount 值传给父组件和兄弟组件Left
      rightCount: 0,
    }
  },
  methods: {
    add () {
      // 让子组件的count值自增 +1
      this.rightCount++
      // 手动调用 这个按钮的点击事件
      // document.querySelector('#rightAdd').click()

      // emit --> 发出
      // 修改数据时, 通过 $emit() 触发自定义事件, 把自增的结果, 传递给父组件
      this.$emit('numChange', this.rightCount)

      // 2.数据发送方, 通过eventBus.$emit('事件名称', 要发生的数据)方法 触发自定义事件
      eventBus.$emit('share', this.rightCount)
    }
  }
}
</script>

<style lang="less" scoped>


</style>
